<template>
  <div>
    <!-- 技术解释区域 -->
    <div style="background-color: #f3e5f5; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #9C27B0;">
      <h3 style="color: #7B1FA2; margin-top: 0;">🌀 技术解释：旋转过渡动画</h3>
      <p><strong>Rotate变换：</strong>使用CSS的 <code>transform: rotate()</code> 来实现旋转效果，角度单位可以是度(deg)或弧度(rad)。</p>
      <p><strong>3D旋转：</strong>可以使用 <code>rotateX()</code>、<code>rotateY()</code>、<code>rotateZ()</code> 实现三维旋转效果。</p>
      <p><strong>旋转中心：</strong>通过 <code>transform-origin</code> 控制旋转的中心点，默认为元素中心。</p>
      <p><strong>组合效果：</strong>旋转可以与缩放、位移、透明度等效果组合，创造复杂的动画。</p>
    </div>

    <!-- 交互演示区域 -->
    <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
      <h3>旋转过渡动画演示</h3>
      
      <!-- 控制面板 -->
      <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
        <div style="margin-bottom: 15px;">
          <button @click="toggleShow" style="padding: 10px 20px; background-color: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            {{ show ? '隐藏元素' : '显示元素' }}
          </button>
          <button @click="changeRotateType" style="padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            类型: {{ rotateType }}
          </button>
          <button @click="changeDirection" style="padding: 10px 20px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            方向: {{ direction }}
          </button>
          <button @click="toggleCombined" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
            组合效果: {{ combined ? '开启' : '关闭' }}
          </button>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">过渡时长：</label>
          <input v-model.number="duration" type="range" min="200" max="2000" step="100" style="margin-right: 10px;">
          <span>{{ duration }}ms</span>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">旋转角度：</label>
          <input v-model.number="angle" type="range" min="90" max="720" step="45" style="margin-right: 10px;">
          <span>{{ angle }}°</span>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">旋转中心：</label>
          <select v-model="origin" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px;">
            <option value="center">center</option>
            <option value="top left">top left</option>
            <option value="top right">top right</option>
            <option value="bottom left">bottom left</option>
            <option value="bottom right">bottom right</option>
          </select>
        </div>
        
        <div>
          <label style="display: inline-block; width: 120px;">缓动函数：</label>
          <select v-model="easing" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
            <option value="ease">ease</option>
            <option value="ease-in">ease-in</option>
            <option value="ease-out">ease-out</option>
            <option value="ease-in-out">ease-in-out</option>
            <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">弹性效果</option>
            <option value="linear">linear</option>
          </select>
        </div>
      </div>

      <!-- 过渡效果展示 -->
      <div style="border: 1px solid #ddd; padding: 40px; border-radius: 4px; background-color: white; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; perspective: 1000px;">
        <Transition :name="transitionName" :duration="duration">
          <div v-if="show" class="demo-box" :style="boxStyle">
            <h4 style="margin: 0 0 10px 0; color: white;">旋转动画</h4>
            <p style="margin: 0; color: white;">{{ rotateType }}</p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">
              {{ direction }} {{ angle }}°
            </p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">
              {{ combined ? '组合效果' : '单纯旋转' }}
            </p>
          </div>
        </Transition>
      </div>

      <!-- 多种旋转效果同时演示 -->
      <div style="margin-top: 20px;">
        <h4>多种旋转效果对比：</h4>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px;">
          <div v-for="type in rotateTypes" :key="type" 
               style="border: 1px solid #ddd; padding: 20px; border-radius: 4px; background-color: white; min-height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1000px;">
            <Transition :name="`rotate-${type}`" :duration="duration">
              <div v-if="showAll" :class="['mini-box', type]">
                {{ type }}
              </div>
            </Transition>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 15px;">
          <button @click="toggleAll" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
            {{ showAll ? '隐藏全部' : '显示全部' }}
          </button>
        </div>
      </div>

      <!-- 状态显示 -->
      <div style="margin-top: 15px; padding: 10px; background-color: #f3e5f5; border-radius: 4px;">
        <strong>当前状态：</strong>
        <p>显示状态: {{ show ? '显示' : '隐藏' }} | 旋转类型: {{ rotateType }} | 旋转方向: {{ direction }}</p>
        <p>旋转角度: {{ angle }}° | 旋转中心: {{ origin }} | 组合效果: {{ combined ? '开启' : '关闭' }}</p>
        <p>过渡时长: {{ duration }}ms | 缓动函数: {{ easing }}</p>
      </div>
    </div>

    <!-- 代码示例 -->
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px; margin-top: 20px;">
      <h4>代码示例：</h4>
      <pre style="background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto;"><code>&lt;template&gt;
  &lt;Transition name="rotate-{{ rotateType }}"&gt;
    &lt;div v-if="show" class="demo-box"&gt;
      内容
    &lt;/div&gt;
  &lt;/Transition&gt;
&lt;/template&gt;

&lt;style&gt;
.rotate-{{ rotateType }}-enter-active, .rotate-{{ rotateType }}-leave-active {
  transition: all {{ duration }}ms {{ easing }};
  transform-origin: {{ origin }};
}
.rotate-{{ rotateType }}-enter-from {
  transform: {{ getTransformValue() }};{{ combined ? '\n  opacity: 0;\n  scale: 0.5;' : '' }}
}
.rotate-{{ rotateType }}-leave-to {
  transform: {{ getTransformValue() }};{{ combined ? '\n  opacity: 0;\n  scale: 0.5;' : '' }}
}
&lt;/style&gt;</code></pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuoDu04',
  data() {
    return {
      show: true,
      showAll: true,
      rotateType: 'z',
      direction: 'clockwise',
      angle: 360,
      origin: 'center',
      duration: 500,
      easing: 'ease-in-out',
      combined: true,
      rotateTypes: ['z', 'x', 'y', '3d', 'flip', 'spin'],
      directions: ['clockwise', 'counter-clockwise']
    };
  },
  computed: {
    transitionName() {
      return `rotate-${this.rotateType}`;
    },
    boxStyle() {
      return {
        background: this.getGradientByType(),
        transformOrigin: this.origin,
        transitionDuration: this.duration + 'ms',
        transitionTimingFunction: this.easing
      };
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    toggleAll() {
      this.showAll = !this.showAll;
    },
    changeRotateType() {
      const currentIndex = this.rotateTypes.indexOf(this.rotateType);
      this.rotateType = this.rotateTypes[(currentIndex + 1) % this.rotateTypes.length];
    },
    changeDirection() {
      this.direction = this.direction === 'clockwise' ? 'counter-clockwise' : 'clockwise';
    },
    toggleCombined() {
      this.combined = !this.combined;
    },
    getGradientByType() {
      const gradients = {
        z: 'linear-gradient(45deg, #9C27B0, #E91E63)',
        x: 'linear-gradient(45deg, #2196F3, #21CBF3)',
        y: 'linear-gradient(45deg, #4CAF50, #8BC34A)',
        '3d': 'linear-gradient(45deg, #FF9800, #FFC107)',
        flip: 'linear-gradient(45deg, #FF5722, #FF9800)',
        spin: 'linear-gradient(45deg, #607D8B, #90A4AE)'
      };
      return gradients[this.rotateType] || gradients.z;
    },
    getTransformValue() {
      const rotateAngle = this.direction === 'clockwise' ? this.angle : -this.angle;
      const transforms = {
        z: `rotate(${rotateAngle}deg)`,
        x: `rotateX(${rotateAngle}deg)`,
        y: `rotateY(${rotateAngle}deg)`,
        '3d': `rotate3d(1, 1, 1, ${rotateAngle}deg)`,
        flip: `rotateY(${rotateAngle}deg)`,
        spin: `rotate(${rotateAngle * 2}deg)`
      };
      return transforms[this.rotateType] || transforms.z;
    }
  }
};
</script>

<style scoped>
.demo-box {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
}

.mini-box {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mini-box.z { background: linear-gradient(45deg, #9C27B0, #E91E63); }
.mini-box.x { background: linear-gradient(45deg, #2196F3, #21CBF3); }
.mini-box.y { background: linear-gradient(45deg, #4CAF50, #8BC34A); }
.mini-box.3d { background: linear-gradient(45deg, #FF9800, #FFC107); }
.mini-box.flip { background: linear-gradient(45deg, #FF5722, #FF9800); }
.mini-box.spin { background: linear-gradient(45deg, #607D8B, #90A4AE); }

/* Z轴旋转 */
.rotate-z-enter-active, .rotate-z-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: v-bind(origin);
}
.rotate-z-enter-from {
  transform: rotate(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.5 : 1);
}
.rotate-z-leave-to {
  transform: rotate(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.5 : 1);
}

/* X轴旋转 */
.rotate-x-enter-active, .rotate-x-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.rotate-x-enter-from {
  transform: rotateX(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}
.rotate-x-leave-to {
  transform: rotateX(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}

/* Y轴旋转 */
.rotate-y-enter-active, .rotate-y-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.rotate-y-enter-from {
  transform: rotateY(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}
.rotate-y-leave-to {
  transform: rotateY(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}

/* 3D旋转 */
.rotate-3d-enter-active, .rotate-3d-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.rotate-3d-enter-from {
  transform: rotate3d(1, 1, 1, v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.8 : 1);
}
.rotate-3d-leave-to {
  transform: rotate3d(1, 1, 1, v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.8 : 1);
}

/* 翻转效果 */
.rotate-flip-enter-active, .rotate-flip-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.rotate-flip-enter-from {
  transform: rotateY(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}
.rotate-flip-leave-to {
  transform: rotateY(v-bind((direction === 'clockwise' ? angle : -angle) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
}

/* 旋转效果 */
.rotate-spin-enter-active, .rotate-spin-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.rotate-spin-enter-from {
  transform: rotate(v-bind((direction === 'clockwise' ? angle * 2 : -angle * 2) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.3 : 1);
}
.rotate-spin-leave-to {
  transform: rotate(v-bind((direction === 'clockwise' ? angle * 2 : -angle * 2) + 'deg'));
  opacity: v-bind(combined ? 0 : 1);
  scale: v-bind(combined ? 0.3 : 1);
}
</style>